<template>
  <el-tag 
    :type="tagType"
    :size="size"
    :effect="effect"
    :round="round"
    :closable="closable"
    :disable-transitions="disableTransitions"
    :class="['status-tag', statusClass]"
    @close="$emit('close')"
  >
    <el-icon v-if="showIcon && iconComponent" class="status-icon">
      <component :is="iconComponent" />
    </el-icon>
    <span class="status-text">{{ displayText }}</span>
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  CircleCheckFilled,
  CircleCloseFilled,
  WarningFilled,
  Loading,
  QuestionFilled,
  Clock,
  VideoPause,
  Remove
} from '@element-plus/icons-vue'

export interface StatusConfig {
  text: string
  type?: 'success' | 'warning' | 'danger' | 'info' | 'primary'
  icon?: any
  class?: string
}

export interface StatusTagProps {
  // 状态值
  status?: string | number
  // 状态映射配置
  statusMap?: Record<string | number, StatusConfig>
  // 显示文本（优先级高于statusMap）
  text?: string
  // Element Plus Tag props
  type?: 'success' | 'warning' | 'danger' | 'info' | 'primary'
  size?: 'large' | 'default' | 'small'
  effect?: 'dark' | 'light' | 'plain'
  round?: boolean
  closable?: boolean
  disableTransitions?: boolean
  // 自定义props
  showIcon?: boolean
  icon?: any
}

const props = withDefaults(defineProps<StatusTagProps>(), {
  size: 'default',
  effect: 'light',
  round: false,
  closable: false,
  disableTransitions: false,
  showIcon: true
})

const emit = defineEmits<{
  close: []
}>()

// 默认状态映射
const defaultStatusMap: Record<string | number, StatusConfig> = {
  // 通用状态
  1: { text: '启用', type: 'success', icon: CircleCheckFilled, class: 'status-active' },
  0: { text: '禁用', type: 'danger', icon: CircleCloseFilled, class: 'status-inactive' },
  
  // 业务状态
  'active': { text: '激活', type: 'success', icon: CircleCheckFilled },
  'inactive': { text: '未激活', type: 'info', icon: VideoPause },
  'pending': { text: '待处理', type: 'warning', icon: Clock },
  'processing': { text: '处理中', type: 'primary', icon: Loading },
  'completed': { text: '已完成', type: 'success', icon: CircleCheckFilled },
  'failed': { text: '失败', type: 'danger', icon: CircleCloseFilled },
  'cancelled': { text: '已取消', type: 'info', icon: Remove },
  'unknown': { text: '未知', type: 'info', icon: QuestionFilled },
  
  // 文件状态
  'uploaded': { text: '已上传', type: 'success', icon: CircleCheckFilled },
  'uploading': { text: '上传中', type: 'primary', icon: Loading },
  'upload_failed': { text: '上传失败', type: 'danger', icon: CircleCloseFilled },
  'deleted': { text: '已删除', type: 'info', icon: Remove },
  
  // 用户状态
  'online': { text: '在线', type: 'success', icon: CircleCheckFilled },
  'offline': { text: '离线', type: 'info', icon: VideoPause },
  'locked': { text: '锁定', type: 'danger', icon: CircleCloseFilled },
  
  // 订单状态
  'paid': { text: '已支付', type: 'success', icon: CircleCheckFilled },
  'unpaid': { text: '未支付', type: 'warning', icon: Clock },
  'refunded': { text: '已退款', type: 'info', icon: Remove },
  'shipped': { text: '已发货', type: 'primary', icon: CircleCheckFilled },
  'delivered': { text: '已送达', type: 'success', icon: CircleCheckFilled }
}

// 合并状态映射
const statusMap = computed(() => ({
  ...defaultStatusMap,
  ...props.statusMap
}))

// 当前状态配置
const currentStatus = computed(() => {
  if (props.status !== undefined) {
    return statusMap.value[props.status] || statusMap.value['unknown']
  }
  return null
})

// 显示文本
const displayText = computed(() => {
  if (props.text) return props.text
  return currentStatus.value?.text || '未知状态'
})

// 标签类型
const tagType = computed(() => {
  if (props.type) return props.type
  return currentStatus.value?.type || 'info'
})

// 图标组件
const iconComponent = computed(() => {
  if (props.icon) return props.icon
  return currentStatus.value?.icon
})

// 状态样式类
const statusClass = computed(() => {
  return currentStatus.value?.class || ''
})
</script>

<style scoped>
.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

.status-icon {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.status-text {
  font-weight: 500;
}

/* 自定义状态样式 */
.status-tag.status-active {
  --el-tag-text-color: #67c23a;
  --el-tag-bg-color: #f0f9ff;
  --el-tag-border-color: #b3e5fc;
}

.status-tag.status-inactive {
  --el-tag-text-color: #909399;
  --el-tag-bg-color: #f4f4f5;
  --el-tag-border-color: #d3d4d6;
}

/* 加载动画 */
.status-tag .status-icon :deep(.loading) {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 尺寸适配 */
.status-tag.el-tag--small .status-icon {
  font-size: 10px;
}

.status-tag.el-tag--large .status-icon {
  font-size: 14px;
}
</style>
